<!-- 运费管理 -->
<template>
  <div
    v-loading="listLoading"
    :class="{ 'loading-box': listLoading }"
    element-loading-text="加载中"
  >
    <div
      v-show="(!freight || freight.length <= 0) && !listLoading "
      slot="empty"
      style="text-align: center;background-color: #fff;margin: 20px;"
    >
      <img
        src="@/icons/pic-kong@2x.png"
        alt="img"
        style="margin-top: 20px;width: 25%;height: 25%;"
      >
      <p
        style="
                      margin-top: -20px;
                      padding-bottom: 10px;
                      "
      >这里空空如也</p>
    </div>
    <el-card
      v-show="(freight.length > 0) && !listLoading "
      slot="empty"
      shadow="never"
      class="table-card"
    >
      <el-button
        type="warning"
        style="margin-bottom:20px"
        @click="addButton()"
      >新增模板</el-button>
      <el-table
        :data="freight"
        fit
        style="width: 100%"
        stripe
        :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
      >
        <el-table-column
          align="left"
          label="模板类型"
          min-width="160"
        >
          <template #default="{row}">
            {{ templateTypeList(row.templateType) }}
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="运送类型"
          min-width="160"
        >
          <template #default="obj">
            {{ transportTypeList(obj.row.transportType) }}
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="关联城市"
          min-width="160"
        >
          <template #default="arr">
            {{ CityList(arr.row) }}

          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="首重"
          min-width="160"
          prop="firstWeight"
        />
        <el-table-column
          align="left"
          label="续重"
          min-width="160"
          prop="continuousWeight"
        />
        <el-table-column
          align="left"
          label="轻抛系数"
          min-width="160"
          prop="lightThrowingCoefficient"
        />
        <el-table-column
          align="center"
          label="操作"
          min-width="200"
        >
          <template #default="string">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 20px;"
              @click.prevent="edit(string.row)"
            >编辑</el-link>|
            <el-link
              type="danger"
              :underline="false"
              style="margin-left: 20px;"
              @click="del(string.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <freightAdd
      ref="refAdd"
      @changeInfo="getFreight"
    ></freightAdd>

  </div>
</template>

<script>
import { getFreightList, delFreightList } from '@/api/freight.js'
import freightAdd from '../transit/components/freight-add.vue'
export default {
  components: {
    freightAdd
  },
  data() {
    return {
      // type: '',
      dialogFormVisible: false,
      freight: [],
      listLoading: true
    }
  },
  // computed: {
  //   title() {
  //     if (this.type === 'edit') {
  //       return '编辑'
  //     } else {
  //       return '添加'
  //     }
  //   }
  // },
  mounted() {
    this.getFreight()
  },
  methods: {
    // 点击取消按钮
    // dialogFormH() {
    //   this.dialogFormVisible = false
    // },
    async getFreight() {
      this.listLoading = true
      const res = await getFreightList()
      this.listLoading = false
      this.freight = res.data
    },
    // 模板类型
    templateTypeList(type) {
      const TYPE = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省寄'
      }
      return TYPE[type]
    },
    // 运送类型
    transportTypeList(type) {
      const TYPE = {
        null: '',
        1: '普快',
        2: '特快'
      }
      return TYPE[type]
    },
    // 关联城市
    CityList(type) {
      const TYPE = {
        null: '',
        1: '全国', 2: '京津冀', 3: '江浙沪', 4: '川渝', 5: '黑吉辽'
      }
      const res = type.associatedCityList.map(item => {
        return TYPE[item]
      }).join(',')
      return res
    },
    // 点击添加按钮
    addButton() {
      this.$refs.refAdd.openDialog('add')
    },

    // 点击编辑按钮
    edit(row) {
      this.$refs.refAdd.editFreight('edit', row)
    },
    // 点击确定，确定添加
    // async submit() {
    //   // 发送请求
    //   try {
    //   // 兜底校验

    //     if (this.type === 'edit') {
    //       await this.$refs.refAdd.validateB()

    //       this.$message.success('编辑成功')
    //       console.log('编辑')
    //     } else {
    //       await this.$refs.refAdd.validate()

    //       this.$message.success('添加成功')
    //       console.log('添加')
    //     }
    //     this.dialogFormVisible = false
    //     this.getFreight()
    //   } catch (error) {
    //     // this.$message.error(error)
    //     console.log(error)
    //   }
    // },
    // 弹层显示
    // dialogFormV() {
    //   this.dialogFormVisible = true
    //   if (this.type === 'add') {
    //     this.$nextTick(() => {
    //       this.$refs.refAdd.resetFields()
    //     })
    //   }
    // },

    // 点击删除
    del(id) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delFreightList(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getFreight()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}
.table-card {
  margin: 20px;
  padding: 10px;
}
</style>
